<template>
  <div class="container footer">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <ul class="unstyle">
          <router-link tag="li" :to="{ path: '/home' }"  @click.native="switchTo(0)"><icon name="main_page" color="gray" scale="2" index="0" :currentIndex="current"></icon><div class="foot active">首页</div></router-link>
          <router-link tag="li" :to="{ path: '/information' }" @click.native="switchTo(1)"><icon name="b_info" color="gray" scale="2" index="1" :currentIndex="current" ></icon><div class="foot">商家</div></router-link>
          <router-link tag="li" :to="{ path: '/shop' }" @click.native="switchTo(2)"><icon name="shop_car" color="gray" scale="2" index="2" :currentIndex="current" ></icon><div class="foot">购物车</div></router-link>
          <router-link tag="li" :to="{ path: '/my' }" @click.native="switchTo(3)"><icon name="b_user" color="gray" scale="2" index="3" :currentIndex="current" ></icon><div class="foot">我的</div></router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'footer',
  data () {
    return {
      current: "0",
    }
  },
  mounted: function () {
    this.fontColor()
  },
  methods: {
    switchTo(index){
      this.current = index.toString();
    },
    beforeEnter: function () {
      this.show = true;
    },
    enter: function () {
      this.show = false;
    },
    leave: function () {
      this.show = true;
    },
    fontColor: function () {
      $("li").click(function(){
        $(this).children(".foot").addClass("active");
        $(this).siblings().children(".foot").removeClass("active");
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.footer {
  z-index: 999;
  font-family: "微软雅黑";
}
</style>
